<template>
  <div>
    <div>
    <h2>Switch</h2>
    <h3>代码演示</h3>
    <div class="demo-box">
      <h4>基本样式</h4>
      <div class="demo">
        <wd-switch v-model="issure"></wd-switch>
      </div>
      <wd-button @click="showcode1" type='primary' class="show">{{showname1}}</wd-button>
      <transition name="fade">
        <pre v-if="ishow1">
       &lt;wd-switch v-model="issure"&gt;&lt;/wd-switch&gt;
      </pre>
      </transition>
    </div>

    <div class="demo-box">
      <h4>基本样式</h4>
      <div class="demo">
        <wd-switch v-model="issure2" activecolor='red' inactivecolor='yellow' name='usename'></wd-switch>
      </div>
      <wd-button @click="showcode2" type='primary' class="show">{{showname2}}</wd-button>
      <transition name="fade">
        <pre v-if="ishow2">
        &lt;wd-switch v-model="issure2" activecolor='red' inactivecolor='yellow' name='usename'&gt;&lt;/wd-switch&gt;
      </pre>
      </transition>
    </div>
  </div>
  </div>
</template>

<script>

export default {
  name: 'switchshow',
  data () {
    return {
      ishow1: false,
      ishow2: false,
      showname1: '显示代码',
      showname2: '显示代码',
      issure: false,
      issure2: false
    }
  },
  methods: {
    showcode1 () {
      this.ishow1 = !this.ishow1
      if (this.showname1 === '显示代码') {
        this.showname1 = '隐藏代码'
      } else {
        this.showname1 = '显示代码'
      }
    },
    showcode2 () {
      this.ishow2 = !this.ishow2
      if (this.showname2 === '显示代码') {
        this.showname2 = '隐藏代码'
      } else {
        this.showname2 = '显示代码'
      }
    }
  }
}
</script>
<style scoped>
  div > h2 {
    display: block;
    font-size: 3em;
    margin: 20px 20px 0;
  }
  div > p {
    margin: 0px 20px 10px;
    font-size: 2em;
  }
  div > h3 {
    margin: 20px;
    font-size: 2em;
  }
  div > .demo-box {
    margin: 20px;
    border: 1px solid rgba(0, 0, 0, .25);
  }
  div > .demo-box > h4 {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .25);
  }
  div > .demo-box > .demo {
    margin-top: 10px;
  }
  div > .demo-box > .show {
    margin: 20px 0 0;
  }
  div > .demo-box > pre {
    background-color: #000;
    color: #fff;
    margin: 20px;
    border-radius: 10px;
    -webkit-user-select: text;
    padding: 20px;
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    font-size: .3rem;
  }
  @keyframes showtime {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fade-enter-active {
    animation: showtime .3s;
  }
  .fade-leave-active {
    animation: showtime .3s reverse;
  }
</style>
